import React, { useEffect, useState } from "react"
import { Breadcrumb } from 'antd';
import { IRouteComponentProps } from "umi"
import style from "./answerid.less"
import { getDetail, getUpdataCommit } from "@/services";
import { Idetailwen } from "@/utils"
import useStore from "@/context/useStore";
import { observer } from "mobx-react-lite"
import Editor from 'for-editor';
const answerDetail: React.FC<IRouteComponentProps> = ({ match }: any) => {
    let { answerId } = match.params
    let [teacher, setTeacher] = useState<Idetailwen>({} as Idetailwen)
    let [flag, setFlag] = useState(false)
    let [isLove, setisLove] = useState(false)
    let { answer } = useStore()
    let [questionValue, setValue] = useState("")
    useEffect(() => {
        getDetail().then((ok: { code: number; data: React.SetStateAction<Idetailwen>; }) => {
            if (ok.code == 200) {
                setTeacher(ok.data)
            }
        })
    }, [])

    useEffect(() => {
        answer.getanswerList(answerId)
        answer.getcommitList(answerId)
    }, [])

    function updataCommit(answerId: string, questionValue: string) {
        console.log(answerId, questionValue);
        getUpdataCommit(answerId, questionValue).then(ok => {
            console.log(ok);
            if (ok.code == 200) {
                answer.getcommitList(answerId)
            }
        })
        // answer.getUpdataCommit(answerId,questionValue)
    }

    return <div className={style.answerid}>
        <div className={style.bread}> 
            <Breadcrumb style={{ padding: "16px", margin: "5px 0 0 22px", fontSize: "15px" }}>
                <Breadcrumb.Item>问答</Breadcrumb.Item>
                <Breadcrumb.Item>问答详情</Breadcrumb.Item>
            </Breadcrumb>
        </div>
        <div className={style.wrapper}>
            <div className={style.left}>
                <div className={style.upper}>
                    <p className={style.titlewen}>{answer.list.questionTitle}</p>
                    <p><img className={style.img} src={`http://111.203.59.61:8060${answer.list.userPictureUrl}`} alt="" /><span className={style.context}>{answer.list.userName}</span><span className={style.context}>发布于{answer.list.pushTime}</span></p>
                    <p className={style.kong}>
                        {answer.list.questionContent}
                    </p>
                    <p>
                        {
                            answer.list.labels && answer.list.labels.map(item => {
                                return <span className={style.spanss} key={item}>{item}</span>
                            })
                        }
                    </p>
                    <p><button className={style.btn} onClick={() => { setFlag(!flag) }}>回答</button><button className={style.btn} onClick={() => setisLove(!isLove)}>{isLove ? "以收藏" : "收藏"}</button></p>
                </div>
                {
                    flag ? <div className={style.md}>
                        <p><img className={style.img} src={`http://111.203.59.61:8060${answer.list.userPictureUrl}`} alt="" /><span className={style.context}>{answer.list.userName}</span></p>
                        <Editor height="200px" value={questionValue} onChange={value => setValue(value)} />
                        <button className={style.btns} onClick={() => { updataCommit(answerId, questionValue) }}>发布</button>
                    </div> : ""
                }
                {answer.commitList.length > 0 ?
                    <div className={style.lower}>
                        <h4 className={style.length}>全部回答({answer.commitList.length})</h4>
                        {
                            answer.commitList.map(item => {
                                return <div key={item.replyId} className={style.commitdiv}>
                                    <p><img className={style.img} src={`http://111.203.59.61:8060${item.userPictureUrl}`} alt="" /><span className={style.context}>{item.userName}</span><span className={style.context}>发布于{item.replyDate}</span></p>
                                    <p className={style.text}>{item.replyContext}</p>
                                </div>
                            })
                        }
                    </div> :
                    <div className={style.lowers}>
                        <h4 className={style.lengths}>全部回答({answer.commitList.length})</h4>
                    </div>
                }
            </div>
            <div className={style.right}>
                <div className={style.title}><span className={style.icon}></span><h3 className={style.my}>我的问答</h3></div>

                <div>
                    <img className={style.img} src={`http://111.203.59.61:8060${answer.list.userPictureUrl}`} alt="" /><span className={style.teacher}>黄辉</span>
                </div>

                <p><span className={style.wen}>问</span> 提问了 <span className={style.answeridSpan}>{teacher.numberQuestions}</span> 个问题 <span className={style.answeridSpan}>{teacher.numberReplies}</span> 人进行了回答</p>
                <p><span className={style.da}>答</span> 回答了 <span className={style.answeridSpan}>{teacher.replyCount}</span> 个问题</p>

            </div>
        </div>
    </div>

}
export default observer(answerDetail)
